<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script  src="color/FEffectParser.js" ></script>
    <script  src="color/FColorConverter.js" ></script>
    <script  src="color/FEffectBase.js" ></script>
    <script  src="color/FStylizeBase.js" ></script>
    <script  src="color/FColorBase.js" ></script>
    <script  src="color/FStylizeShadow.js" ></script>
    <script  src="color/FPattern.js" ></script>
    <script  src="color/FGradient.js" ></script>
    <script  src="color/FColor.js" ></script>
    <script  src="color/FGraphBase.js" ></script>
    <script  src="color/FStroke.js" ></script>
    <script  src="color/FFilterBase.js" ></script>
    <script  src="color/FImageFilter.js" ></script>

    <script  src="obj/Serializer.js" ></script>
    <script  src="obj/PrintObj.js" ></script>
    <script  src="obj/TextTableTd.js" ></script>
    <script  src="obj/TextTableObj.js" ></script>
    <script  src="obj/TextObj.js" ></script>
    <script  src="obj/Template.js" ></script>
    <script  src="obj/TableTd.js" ></script>
    <script  src="obj/TableObj.js" ></script>


    <script  src="obj/PrintPage.js" ></script>
    <script  src="obj/Parser.js" ></script>
    <script  src="obj/FileObj.js" ></script>
    <script  src="obj/ImageObj.js" ></script>
    <script  src="obj/GroupObj.js" ></script>
    <script  src="obj/SubTemplateObj.js" ></script>
    <script  src="obj/GraphObj.js" ></script>
    <script  src="obj/FrameObj.js" ></script>


    <script  src="common/TextTableTraveller.js" ></script>
    <script  src="common/StyleProcessor.js" ></script>
    <script  src="common/PointPath.js" ></script>
    <script  src="common/Point.js" ></script>
    <script  src="common/ParaContour.js" ></script>
    <script  src="common/OnePara.js" ></script>
    <script  src="common/FMatrix.js" ></script>
    <script  src="common/Effect.js" ></script>
    <script  src="common/CompoundPath.js" ></script>




    <script type="text/javascript">
    // 定义解析函数
    function fromPdfParseResult(json){
        var page = new PrintPage();
        page.sub = new Array(); // 以前记录的是对象，改成记录id
        page.index= 0 ;  // 页码，从0开始
        page.w=1000;				// 宽
        page.h=1000;				// 高

        var group = new GroupObj();

		page.root = group;
        group.fromJson(JSON.parse(json))

        return page;
    }
    // RGB-> #FFFFFF
    function rgbToHex(colors){
        var r = ((colors[0].toFixed(0))*1).toString(16);
        r = r.length==0?"00":(r.length==1?("0"+r): r.substr(0,2));
        var g = ((colors[1].toFixed(0))*1).toString(16);
        g = g.length==0?"00":(g.length==1?("0"+g): g.substr(0,2));
        var b = ((colors[2].toFixed(0))*1).toString(16);
        b = b.length==0?"00":(b.length==1?("0"+b): b.substr(0,2));
        return '#'+r+g+b;
    }

        // 解析并描绘数据
        function parseAndDraw(json){
            // 获取canvas的context
            // 为重用addToPdf代码，context补齐以下函数：
            //      path(svgPath)
            //      fillColor(colors)
            //      opacity(alpha)
            //      linearGradient(x0,y0,x1,y1)
            //      fill(f)
            //      radialGradient(x0,y0,r0,x1,y1,r1)
            //      strokeColor(strokeClr)
			//      lineWidthFunc(width)
			//		lineCapFunc(cap) 
            //		lineJoinFunc(join)
            //		miterLimitFunc(limit)

            //------------------------------------补充函数 start------------------------------------
            //                      功能：描绘svg格式的path
            //                      参数：svgPath：svg格式的path，例如，SVG格式的字符串：
            //                                      'M 0,20 L 100,160 Q 130,200 150,120 C 190,-40 200,200 300,150 L 400,90 z
            //                                      M 0,20 L 100,160 Q 130,200 150,120 C 190,-40 200,200 300,150 L 400,90 z'
            //                      返回：doc对象
            var canvas=document.getElementById('canvas');
            var doc=canvas.getContext('2d');

            doc.path = function(svgPath){
                doc.beginPath();
                var factor = 1;
                var arr = svgPath.split(" ");
                var len = arr.length;
                for(var i=0; i<len; i++){
                    var item = arr[i];
                    if(item=='M'){
                        var p = arr[i+1].split(',');
                        doc.moveTo(p[0]*factor,p[1]*factor);
                        i++;
                    }else if(item=='L'){
                        var p = arr[i+1].split(',');
                        doc.lineTo(p[0]*factor,p[1]*factor);
                        i++;
                    }else if(item=='Q'){
                        var p1 = arr[i+1].split(',');
                        var p2 = arr[i+2].split(',');
                        doc.quadraticCurveTo(p1[0]*factor, p1[1]*factor, p2[0]*factor, p2[1]*factor);
                        i+=2;
                    }else if(item=='C'){
                        var p1 = arr[i+1].split(',');
                        var p2 = arr[i+2].split(',');
                        var p3 = arr[i+3].split(',');
                        doc.bezierCurveTo(p1[0]*factor, p1[1]*factor, p2[0]*factor, p2[1]*factor, p3[0]*factor, p3[1]*factor);
                        i+=3;
                    }else if(item=='z'){
                        doc.closePath();
                    }
                }
                return doc;
            }

            //                      功能：填充色
            //                      参数：colors：rgb分量的颜色数组或者cmyk分量的颜色数组
            //                      返回：doc对象
            doc.fillColor = function(colors){
                var clr;
                if(colors.length==4){// cmyk -> rgb
                    colors = FColorConverter.prototype.CMYK_2_RGB(colors[0],colors[1],colors[2],colors[3])
                }

                doc.fillStyle =rgbToHex(colors);

                return doc;
            }


            //                      功能：透明度
            //                      参数：alpha：透明度
            //                      返回：doc对象
            doc.opacity = function(alpha){
                doc.globalAlpha *= alpha;
                return doc;
            }



            //                      功能：创建线性渐变
            //                      参数：渐变的bbox
            //                      返回：渐变对象，有函数：stop(ratios, clrs, alphas)
            //                                                  功能：创建渐变的所有stop
            //                                                  参数：     ratios：所有stop的位置的数组
            //                                                             clrs：所有stop的color的数组
            //                                                             alphas：所有stop的透明度的数组
            doc.linearGradient = function(x0,y0,x1,y1){
                var grad =  doc.createLinearGradient(x0,y0,x1,y1);

                grad.stop = function(ratio, clr, alpha){
                    grad.addColorStop.call(this, ratio,rgbToHex(clr));
                }
                return grad;


            }

            //                      功能：设定填充样式，并填充
            //                      参数：f：可变参数，可能是：
            //                                  1、奇偶或者非零填充方式，字符串类型，'non-zero' 或者'non-zero'
            //                                  2、渐变，渐变类型
            //                      返回：doc对象
            var doc_old_fill = doc.fill;
            doc.fill = function(f){
                if(typeof f == 'string'){

                }else {
                    doc.fillStyle = f;
                }
                doc_old_fill.call(doc);

                return doc;
            }

            //                      功能：创建径向渐变
            //                      参数：    x0	渐变的开始圆的 x 坐标
            //                                y0	渐变的开始圆的 y 坐标
            //                                r0	开始圆的半径
            //                                x1	渐变的结束圆的 x 坐标
            //                                y1	渐变的结束圆的 y 坐标
            //                                r1	结束圆的半径
            //                      返回：渐变对象，有函数：stop(ratios, clrs, alphas)
            //                                                  功能：创建渐变的所有stop
            //                                                  参数：     ratios：所有stop的位置的数组
            //                                                             clrs：所有stop的color的数组
            //                                                             alphas：所有stop的透明度的数组
            doc.radialGradient = function(x0,y0,r0,x1,y1,r1){
                var grad =  doc.createRadialGradient(x0,y0,r0,x1,y1,r1);
                grad.stop = function(ratios, clrs, alphas){
                    this.addColorStop.call(grad, ratio,rgbToHex(clr));
                }
                return grad;

            }

            //                      功能：填充色
            //                      参数：colors：rgb分量的颜色数组或者cmyk分量的颜色数组
            //                      返回：doc对象
            doc.strokeColor = function(colors){
                var clr;
                if(colors.length==4){// cmyk -> rgb
                    colors = FColorConverter.prototype.CMYK_2_RGB(colors[0],colors[1],colors[2],colors[3])
                }

                doc.strokeStyle= rgbToHex(colors);

                return doc;
            }
            //                      功能：设定描边的样式
            //                      参数：
            //                      返回：doc对象
            doc.lineWidthFunc = function(width) {    this.lineWidth=width;		return this;}
            doc.lineCapFunc = function(cap)     {    this.lineCap = cap;		return this;}
            doc.lineJoinFunc = function(join)   {    this.lineJoin = join;		return this;}
            doc.miterLimitFunc = function(limit){    this.miterLimit = limit;   return this;}

            //------------------------------------补充函数 end------------------------------------

            // 解析\描绘
            var p = fromPdfParseResult(json);
            canvas.width = p.w;
            canvas.height = p.h;
            p.addToPdf(doc,{});
        }
        function loadFinished(){
            // 定义解析数据
            var json='{"ct":6,"x":0.00,"y":0.00,"se":0,"w":515.91,"h":728.50,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"sub":[{"ct":4,"x":84.26,"y":61.12,"se":0,"w":11.38,"h":8.89,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.00,"M":0.10,"Y":0.20,"K":0.74}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[0.00,0.00,8],[11.38,0.00,1],[11.38,8.89,1],[0.00,8.89,1],[0.00,0.00,9]],"w":0.00,"h":0.00}],"w":11.38,"h":8.89,"x":0.00,"y":0.00}},{"ct":4,"x":36.53,"y":59.86,"se":0,"w":12.89,"h":10.64,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.00,"M":0.10,"Y":0.20,"K":0.74}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[0.02,0.00,8],[12.89,0.00,1],[11.36,10.64,1],[0.00,10.32,1],[0.02,0.00,9]],"w":0.00,"h":0.00}],"w":12.89,"h":10.64,"x":0.00,"y":0.00}},{"ct":6,"x":0.00,"y":0.00,"se":0,"w":515.91,"h":728.50,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"sub":[{"ct":4,"x":-0.49,"y":-7.39,"se":0,"w":117.68,"h":78.01,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.00,"M":0.18,"Y":0.63,"K":0.13}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[38.62,77.62,8],[31.52,77.49,1],[36.77,71.18,3],[33.62,61.20,3],[28.37,56.47,3],[24.17,51.22,3],[15.24,48.85,3],[9.98,55.95,3],[5.63,61.83,3],[0.00,62.25,3],[0.53,51.74,3],[1.05,41.24,3],[14.19,26.00,3],[14.19,26.00,3],[14.19,26.00,3],[31.26,0.00,3],[58.84,9.46,3],[61.99,14.45,1],[61.99,14.45,3],[39.66,5.78,3],[23.38,24.95,3],[26.79,26.79,1],[26.79,26.79,3],[34.15,12.08,3],[62.25,16.02,3],[65.67,20.75,1],[65.67,20.75,3],[40.45,17.34,3],[31.52,30.21,3],[34.67,32.57,1],[34.67,32.57,3],[62.52,11.82,3],[104.02,30.21,3],[117.68,29.68,1],[109.27,36.51,1],[114.00,47.02,3],[112.95,59.10,3],[104.54,63.30,3],[98.76,68.03,3],[98.76,70.66,3],[99.29,77.49,3],[95.87,77.49,1],[95.87,68.82,1],[94.04,68.82,1],[93.78,77.49,1],[87.46,77.49,1],[87.46,69.08,1],[85.37,69.08,1],[85.63,77.49,1],[81.69,77.49,1],[81.69,65.40,1],[76.96,66.19,3],[63.04,66.19,3],[53.06,61.20,3],[52.01,78.01,1],[47.77,77.91,1],[47.51,68.82,1],[45.97,68.82,1],[45.97,77.84,1],[40.44,77.68,1],[40.71,68.63,1],[38.88,68.37,1],[38.62,77.62,9]],"w":0.00,"h":0.00}],"w":117.68,"h":78.01,"x":0.00,"y":0.00}},{"ct":4,"x":1.06,"y":17.04,"se":0,"w":29.44,"h":34.33,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.00,"M":0.20,"Y":0.31,"K":0.56}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[11.58,25.57,8],[7.80,30.37,3],[4.74,33.37,3],[2.75,33.84,3],[2.48,31.69,3],[0.90,28.89,3],[6.16,21.89,3],[5.45,21.71,1],[5.45,21.71,3],[2.18,23.40,3],[0.84,33.06,3],[0.67,34.33,3],[0.00,29.75,3],[0.38,26.27,3],[1.60,14.88,3],[17.19,0.00,3],[17.19,0.00,3],[20.69,0.00,3],[29.44,5.60,3],[27.17,8.23,3],[29.18,13.40,1],[23.14,13.66,1],[24.98,18.91,1],[19.72,18.91,1],[20.51,24.95,1],[14.47,23.90,1],[11.58,25.57,9]],"w":0.00,"h":0.00}],"w":29.44,"h":34.33,"x":0.00,"y":0.00}},{"ct":4,"x":13.89,"y":25.65,"se":0,"w":3.79,"h":3.79,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.00,"M":0.18,"Y":0.63,"K":0.13}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[3.79,1.90,8],[3.79,2.94,3],[2.94,3.79,3],[1.90,3.79,3],[0.85,3.79,3],[0.00,2.94,3],[0.00,1.90,3],[0.00,0.85,3],[0.85,0.00,3],[1.90,0.00,3],[2.94,0.00,3],[3.79,0.85,3],[3.79,1.90,3]],"w":0.00,"h":0.00}],"w":3.79,"h":3.79,"x":0.00,"y":0.00}},{"ct":4,"x":14.58,"y":26.34,"se":0,"w":2.41,"h":2.41,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.00,"M":0.10,"Y":0.20,"K":0.74}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[2.41,1.21,8],[2.41,1.87,3],[1.87,2.41,3],[1.21,2.41,3],[0.54,2.41,3],[0.00,1.87,3],[0.00,1.21,3],[0.00,0.54,3],[0.54,0.00,3],[1.21,0.00,3],[1.87,0.00,3],[2.41,0.54,3],[2.41,1.21,3]],"w":0.00,"h":0.00}],"w":2.41,"h":2.41,"x":0.00,"y":0.00}},{"ct":4,"x":19.12,"y":-2.75,"se":0,"w":39.57,"h":18.39,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.10,"M":0.00,"Y":0.20,"K":0.63}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[0.00,17.16,8],[2.63,18.39,1],[2.63,18.39,3],[15.41,1.93,3],[39.57,7.71,3],[38.17,5.78,1],[38.17,5.78,3],[18.21,0.00,3],[0.00,17.16,3]],"w":0.00,"h":0.00}],"w":39.57,"h":18.39,"x":0.00,"y":0.00}},{"ct":4,"x":27.88,"y":5.66,"se":0,"w":35.02,"h":15.59,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.10,"M":0.00,"Y":0.20,"K":0.63}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[0.00,13.66,8],[2.10,15.59,1],[2.10,15.59,3],[13.66,1.40,3],[35.02,6.65,3],[33.10,4.38,1],[33.10,4.38,3],[13.31,0.00,3],[0.00,13.66,3]],"w":0.00,"h":0.00}],"w":35.02,"h":15.59,"x":0.00,"y":0.00}},{"ct":4,"x":35.62,"y":31.74,"se":0,"w":71.60,"h":12.68,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.00,"M":0.21,"Y":0.45,"K":0.36}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[71.60,9.46,8],[70.18,9.40,3],[68.14,7.18,3],[66.64,5.56,3],[65.44,4.25,3],[64.39,3.12,3],[63.36,2.60,3],[58.54,0.16,3],[55.76,2.93,3],[53.52,5.16,3],[52.39,6.28,3],[51.32,7.35,3],[50.06,7.81,3],[46.87,8.97,3],[45.28,7.56,3],[42.53,4.76,3],[41.10,3.33,1],[37.60,0.00,3],[33.14,0.57,3],[28.86,4.90,3],[25.65,8.15,3],[23.74,8.07,3],[19.59,4.51,3],[16.93,2.23,3],[13.55,1.10,3],[10.32,1.41,3],[6.52,1.78,3],[4.12,3.99,3],[1.81,6.12,3],[0.00,7.73,1],[2.02,10.15,1],[3.95,8.43,1],[6.06,6.49,3],[7.87,4.81,3],[10.62,4.55,3],[12.97,4.32,3],[15.55,5.20,3],[17.54,6.91,3],[22.02,10.74,3],[26.03,12.25,3],[31.10,7.12,3],[35.66,2.50,3],[38.12,4.85,3],[38.93,5.62,3],[40.28,6.97,1],[42.91,9.64,3],[45.89,12.68,3],[51.14,10.77,3],[53.05,10.07,3],[54.48,8.65,3],[55.74,7.40,3],[58.05,5.10,3],[59.27,4.06,3],[61.94,5.41,3],[62.46,5.67,3],[63.45,6.75,3],[64.32,7.70,3],[66.40,9.95,3],[68.75,12.50,3],[71.48,12.61,3],[71.60,9.46,9]],"w":0.00,"h":0.00}],"w":71.60,"h":12.68,"x":0.00,"y":0.00}},{"ct":4,"x":43.53,"y":38.83,"se":0,"w":4.76,"h":4.76,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.10,"M":0.00,"Y":0.20,"K":0.63}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[4.76,2.38,8],[4.76,3.70,3],[3.70,4.76,3],[2.38,4.76,3],[1.07,4.76,3],[0.00,3.70,3],[0.00,2.38,3],[0.00,1.07,3],[1.07,0.00,3],[2.38,0.00,3],[3.70,0.00,3],[4.76,1.07,3],[4.76,2.38,3]],"w":0.00,"h":0.00}],"w":4.76,"h":4.76,"x":0.00,"y":0.00}},{"ct":4,"x":57.98,"y":32.00,"se":0,"w":4.76,"h":4.76,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.10,"M":0.00,"Y":0.20,"K":0.63}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[4.76,2.38,8],[4.76,3.70,3],[3.70,4.76,3],[2.38,4.76,3],[1.07,4.76,3],[0.00,3.70,3],[0.00,2.38,3],[0.00,1.07,3],[1.07,0.00,3],[2.38,0.00,3],[3.70,0.00,3],[4.76,1.07,3],[4.76,2.38,3]],"w":0.00,"h":0.00}],"w":4.76,"h":4.76,"x":0.00,"y":0.00}},{"ct":4,"x":81.62,"y":33.05,"se":0,"w":4.76,"h":4.76,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.10,"M":0.00,"Y":0.20,"K":0.63}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[4.76,2.38,8],[4.76,3.70,3],[3.70,4.76,3],[2.38,4.76,3],[1.07,4.76,3],[0.00,3.70,3],[0.00,2.38,3],[0.00,1.07,3],[1.07,0.00,3],[2.38,0.00,3],[3.70,0.00,3],[4.76,1.07,3],[4.76,2.38,3]],"w":0.00,"h":0.00}],"w":4.76,"h":4.76,"x":0.00,"y":0.00}},{"ct":4,"x":69.10,"y":38.83,"se":0,"w":4.76,"h":4.76,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.10,"M":0.00,"Y":0.20,"K":0.63}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[4.76,2.38,8],[4.76,3.70,3],[3.70,4.76,3],[2.38,4.76,3],[1.07,4.76,3],[0.00,3.70,3],[0.00,2.38,3],[0.00,1.07,3],[1.07,0.00,3],[2.38,0.00,3],[3.70,0.00,3],[4.76,1.07,3],[4.76,2.38,3]],"w":0.00,"h":0.00}],"w":4.76,"h":4.76,"x":0.00,"y":0.00}},{"ct":4,"x":94.67,"y":38.83,"se":0,"w":4.76,"h":4.76,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.10,"M":0.00,"Y":0.20,"K":0.63}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[4.76,2.38,8],[4.76,3.70,3],[3.70,4.76,3],[2.38,4.76,3],[1.07,4.76,3],[0.00,3.70,3],[0.00,2.38,3],[0.00,1.07,3],[1.07,0.00,3],[2.38,0.00,3],[3.70,0.00,3],[4.76,1.07,3],[4.76,2.38,3]],"w":0.00,"h":0.00}],"w":4.76,"h":4.76,"x":0.00,"y":0.00}},{"ct":4,"x":35.93,"y":4.43,"se":0,"w":70.75,"h":29.16,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.00,"M":0.20,"Y":0.31,"K":0.56}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[0.00,22.59,8],[0.00,22.59,3],[34.85,0.00,3],[70.75,23.82,3],[67.07,29.16,1],[63.13,24.69,1],[58.14,28.37,1],[55.25,22.85,1],[49.91,27.67,1],[48.68,20.23,1],[43.43,25.22,1],[40.54,18.12,1],[36.07,23.99,1],[33.45,17.60,1],[30.12,25.92,1],[24.78,18.91,1],[24.17,25.92,1],[18.47,21.01,1],[18.56,28.37,1],[14.01,21.80,1],[12.61,27.67,1],[7.70,23.38,1],[6.13,27.58,1],[0.00,22.59,9]],"w":0.00,"h":0.00}],"w":70.75,"h":29.16,"x":0.00,"y":0.00}},{"ct":4,"x":47.05,"y":45.15,"se":0,"w":55.16,"h":18.91,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[{"id":-1,"type":101,"C":0.00,"M":0.20,"Y":0.31,"K":0.56}],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[0.00,3.42,8],[0.00,3.42,3],[25.48,18.91,3],[55.16,4.47,3],[50.17,1.31,1],[49.38,4.73,1],[44.13,2.10,1],[42.03,7.09,1],[38.09,2.36,1],[37.82,8.67,1],[34.67,2.89,1],[32.31,7.88,1],[28.63,2.63,1],[26.53,8.67,1],[23.11,3.68,1],[19.70,7.62,1],[17.07,1.58,1],[13.40,6.30,1],[11.03,2.36,1],[8.67,5.25,1],[5.78,0.00,1],[3.68,2.89,1],[0.00,3.42,9]],"w":0.00,"h":0.00}],"w":55.16,"h":18.91,"x":0.00,"y":0.00}}],"mask":{"ct":4,"x":0.00,"y":0.00,"se":0,"w":515.91,"h":728.50,"al":1.00,"an":0.00,"sc":1.00,"lk":false,"ef":[],"tk":0,"tn":"","pageIndex":-1,"id":-1,"offset":-1,"parent":0,"parentTdOffset":-1,"di":"","cp":{"paths":[{"points":[[0.00,0.00,8],[515.91,0.00,1],[515.91,728.50,1],[0.00,728.50,1],[0.00,0.00,9]],"w":0.00,"h":0.00}],"w":515.91,"h":728.50,"x":0.00,"y":0.00}}}]}';
            parseAndDraw(json);
        }


    </script>

</head>
<body onload="loadFinished()">
<canvas id="canvas" width=800 height=600 style="border: 1px solid #ccc;"></canvas>
</body>
</html>